<!--分页选择控件-->
<template>
    <div>
        <div class="page_wrap">
        <el-button @click="prev" v-if="currentPageNo > 1" class="page_btn prev" :icon="ArrowLeftBold"></el-button>
        <div class="list">
            <el-button size="large" class="item" v-for="(item) in currentPageData" @click="pageItemClick(item)">
                {{ item[nameKey] }}
            </el-button>
        </div>

        <el-button class="page_btn next" v-if="currentPageNo < Math.ceil(list.flat().length / pageSize)" @click="next"
            :icon="ArrowRightBold"></el-button>


    </div>
    <div class="empty" v-show="currentPageData.length <= 0">没有搜索到内容,请更换关键字</div>
    </div>
</template>
<script setup lang="ts">
//ts-nocheck
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import { paginateData } from '@renderer/utils'
import { computed, ref } from 'vue'

//list 是完整数据
//nameKey 是分页项的名称键
const props = withDefaults(defineProps<{ list: Array<any>, nameKey?: string }>(), {
    nameKey: 'name'
})
const emit = defineEmits(['pageItemClick'])
const currentPageNo = ref(1)
const pageSize = ref(10)
function prev() {
    currentPageNo.value--
}
function next() {
    currentPageNo.value++
}
function pageItemClick(item) {
    emit('pageItemClick', item)
}

//当前页数据
const currentPageData = computed(() => {
    console.log(paginateData(props.list, pageSize.value))
    console.log(paginateData(props.list, pageSize.value)[currentPageNo.value - 1])
    return paginateData(props.list, pageSize.value)[currentPageNo.value - 1] || []
})



</script>

<style lang="scss" scoped>
.page_wrap {

    display: flex;
    align-items: center;
    width: 100%;

    .list {
        flex: 1;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(5, minmax(100px, 1fr));
        gap: 5px;
        overflow: hidden;

        :deep(.el-button) {
            margin-left: 0;

            span {
                display: -webkit-box !important;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                white-space: break-spaces;
                overflow: hidden;
            }
        }
    }

    .page_btn {
        height: 85px;

        &.prev {
            margin-right: 10px;
        }

        &.next {
            margin-left: 10px;
        }
    }
}

.empty {
    height: 80px;
}
</style>